<!--
 * @Author: 陈娇
 * @Date: 2021-04-15 15:35:48
 * @LastEditTime: 2021-04-22 15:29:59
 * @LastEditors: Please set LastEditors
 * @Description: 协议设置
 * @FilePath: \ebc-admin\src\views\basics\GeneralSet\ProtocolSettings.vue
-->
<template>
  <div class="no-padding">
   <tab-list
    ref="list"
    :searchs="searchs"
    :list-hedar ="listHedar"
    :apiFunction="apiFunction"
    :params="params"
    @init-params="initParams"
   >
      <template slot="operate" slot-scope="scope">
        <el-button type="text" size="small" @click="edit(scope.value)">编辑</el-button>
      </template>
   </tab-list>

    <!-- 弹窗 -->
    <el-dialog
        title="编辑协议"
        :visible.sync="dialogFormVisible"
        @open="$refs.form && $refs.form.resetForm()"
      >
        <edit-form
          ref="form"
          :edit-list="protocolEditList"
          :form="form"
          @on-submit="protocolEditor"
        >
          <template slot="text">
            <div id="text" style="height: 500px"></div>
          </template>
        </edit-form>
        <!-- 弹窗操作按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
        </span>
    </el-dialog> 

  </div>
</template>

<script>
// 组件
import TabList from '@/components/admin/tab-list.vue'
import EditForm from '@/components/admin/edit-form.vue'
// 公共
import { asyncApiFun } from '@/utils/utils.js'
// 数据
import { searchs, listHedar, protocolEditList } from './config/general.config'
// 接口
import {  getCommonConfig ,updateCommonConfig} from '@/api/basics.js'
// 王编辑器插件引入
import E from 'wangeditor'

export default {
  name: 'ProtocolSettings',
  components: {
    // adminTable,
    EditForm,
    TabList
  },
  data() {
    return {
      listHedar,
      searchs,
      apiFunction: getCommonConfig,
      dialogFormVisible: false,
      protocolEditList, //编辑框头部
      form: {},         //编辑框表单数据
      formSettingCode:"",
      params:{id: 'PROTOCOL'},
      editor: null
    }
  },
  methods: {
    // 编辑协议
    edit({ settingContent , settingCode ,settingName }){
      this.dialogFormVisible = true
      this.$nextTick(() => {
        if (!this.editor) {
          this.editor = new E('#text')
          this.editor.create()
        }
        this.editor.txt.html(settingContent)
      })
      this.formSettingCode = settingCode
      
      // 重置编辑框数据
      this.form = { settingContent , settingName }
       
    },
    // 确认或提交
    async protocolEditor() {
      const form = this.form
      const settings = [
          {
            settingCode: this.formSettingCode,
            settingContent: this.editor.txt.html(),
            settingGroup: "PROTOCOL",
            settingName:form.settingName
          }
      ]
      const _params = {
        code: "",
        content: "",
        settingName: "",
        settings
      }
      // 发起请求
        const [res] = await asyncApiFun(updateCommonConfig , _params)
        if(res) {
          this.$message({ message: '编辑成功', type: 'success' })
        }
        // 关闭弹窗
         this.dialogFormVisible = false
        // 刷新列表数据
         this.$refs.list.getList()
    },
    // 刷新列表
    refreshList() {
      this.$refs.list.getList()
    },
    // 初始化参数
    initParams(param) {
      this.params = {id: 'PROTOCOL', ...param}
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
